<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="软件名称" prop="name">
        <el-select v-model="ruleForm.name" placeholder="请选择软件" @change="checkMsg()">
          <el-option
            v-for="soft in ruleForm.softList"
            :key="soft.BranchURL"
            :label="soft.SoftName"
            :value="soft.SoftName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用版本" prop="version">
        <el-select v-model="ruleForm.version" placeholder="请选择软件版本">
          <el-option
            v-for="(v, i) in ruleForm.softVersions.length"
            :key="i"
            :label="ruleForm.softVersions[i]"
            :value="ruleForm.softVersions[i]"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安装位置" prop="path">
        <el-input v-model="ruleForm.installPath" style="width:520px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
        <el-button @click="loadSoft()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { ElFormItemContext } from 'element-plus/es/tokens';
import { useRouter } from 'vue-router';
import * as fs from 'fs';

export default defineComponent({
  setup() {
    const mRouter = useRouter();
    const loginForm = ref<ElFormItemContext>();

    let remoteSofts = localStorage.getItem('remoteSoftList'); // 读取缓存里的列表
    let softList = JSON.parse(remoteSofts + '');

    const state = reactive({
      ruleForm: {
        name: '',
        softList: softList,
        version: '',
        softVersions: [],
        files: '',
        installPath: 'C://soft',
        remotePath: ''
      },
      rules: {
        name: [{ required: true, message: '请选择软件', trigger: 'change' }],
        version: [{ required: true, message: '请选择版本', trigger: 'blue' }]
      }
    });

    const loadSoft = () => {
      if (fs.existsSync('./public/data/softList.json')) {
        let userSoftsJson = JSON.parse(fs.readFileSync('./public/data/softList.json', 'utf8'));
        const data = userSoftsJson['SoftList'];
        let softList = JSON.stringify(data);
        localStorage.setItem('softList', softList);
      }
      mRouter.push('/home');
    };

    let soft = {
      SoftName: '',
      SoftImage: 'logo.jpg',
      Version: '',
      LocalPath: '',
      RemotePath: '',
      isInstall: false,
      isNew: false
    };

    const onSubmit = async () => {
      soft.SoftName = state.ruleForm.name;
      soft.Version = state.ruleForm.version;
      soft.LocalPath = state.ruleForm.installPath;
      soft.RemotePath = state.ruleForm.remotePath;
      if (fs.existsSync('./public/data/softList.json')) {
        fs.readFile('./public/data/softList.json', 'utf-8', function(err, data) {
          const userSoftsJson = JSON.parse(data);
          userSoftsJson.SoftList.push(soft);
          const softList = JSON.stringify(userSoftsJson, null, '\t');
          localStorage.setItem('softList', userSoftsJson.SoftList);
          fs.writeFile('./public/data/softList.json', softList, function(err) {
            if (err) {
              console.error(err);
            }
            console.log('----------新增成功-------------');
          });
        });
      }
      await mRouter.push('/temp');
    };

    const checkMsg = () => {
      const name = state.ruleForm.name;
      if (name == null) return;
      state.ruleForm.version = '';
      for (let i = 0; i < softList.length; i++) {
        const element = softList[i];
        if (element.SoftName === name) {
          state.ruleForm.softVersions = element.VersionList;
          state.ruleForm.remotePath = element.BranchURL;
        }
      }
    };

    return {
      ...toRefs(state),
      loadSoft,
      loginForm,
      checkMsg,
      onSubmit
    };
  }
});
</script>

<style lang="less" scoped></style>
